<template>
	<bm-overlay ref="customOverlay" :class="{ sample: true, active }" pane="labelPane" @draw="draw">
		<view class="item" :class="{ active: showitem.id == item.id }" @click="itemtap">
			<!-- <u-button @click="itemtap()">11</u-button> -->
			<view class="marker"></view>
			<view class="kx">
				<view class="text">
					{{ kxtd }}
				</view>
				<view class="text">{{$z.$t("空闲")}}</view>
			</view>
			<view class="je">{{$z.$t(`${df}元/度`)}}</view>
		</view>
	</bm-overlay>
</template>

<script>
	export default {
		props: ["text", "position", "active", "item", "showitem"],
		watch: {
			item: {
				handler() {
					this.$refs.customOverlay.reload();
				},
				deep: true,
			},
		},
		asyncComputed: {
			async df() {
				let StationHD = await this.$store.dispatch("request/getRequest", {
					url: "/StationHD",
					data: {
						id: this.item.id,
					},
				});
				if (StationHD.length == 0) {
					return "0";
				}
				if (StationHD[0].type == "1") {
					return Number(StationHD[0].df).div(100);
				}
				let StationCar = this.item;

				let dfarr1 = [
					[{
							label: this.$z.$t("尖峰"),
							value: "jdf",
						},
						{
							label: this.$z.$t("尖峰服务费"),
							value: "jfff",
						},
						["jsjsh", "jsjsm", "jsjeh", "jsjem"],
					],
					[{
							label: this.$z.$t("高峰"),
							value: "fdf",
						},
						{
							label: this.$z.$t("高峰服务费"),
							value: "ffff",
						},
						["fsjsh", "fsjsm", "fsjeh", "fsjem"],
					],
					[{
							label: this.$z.$t("平峰"),
							value: "pdf",
						},
						{
							label: this.$z.$t("平峰服务费"),
							value: "pfff",
						},
						["psjsh", "psjsm", "psjeh", "psjem"],
					],
					[{
							label: this.$z.$t("谷峰"),
							value: "gdf",
						},
						{
							label: this.$z.$t("谷峰服务费"),
							value: "gfff",
						},
						["gsjsh", "gsjsm", "gsjeh", "gsjem"],
					],
				];
				let times = [];
				dfarr1.forEach((e) => {
					let je1 = StationCar[e[0].value] / 100;
					let je2 = StationCar[e[1].value] / 100;
					let je3 = Number(StationCar[e[0].value])
						.add(Number(StationCar[e[1].value]))
						.div(100);

					let dsstr = "";
					for (let i = 1; i <= 5; i++) {
						let t1 = StationCar[`${e[2][0]}${i}`];
						let t2 = StationCar[`${e[2][1]}${i}`];
						let t3 = StationCar[`${e[2][2]}${i}`];
						let t4 = StationCar[`${e[2][3]}${i}`];
						if (!t1) {
							t1 = "0";
						}
						if (!t2) {
							t2 = "0";
						}
						if (!t3) {
							t3 = "0";
						}
						if (!t4) {
							t4 = "0";
						}
						t1 = t1 < 10 ? "0" + t1 : t1;
						t2 = t2 < 10 ? "0" + t2 : t2;
						t3 = t3 < 10 ? "0" + t3 : t3;
						t4 = t4 < 10 ? "0" + t4 : t4;

						if (!(t1 == 0 && t2 == 0 && t3 == 0 && t4 == 0)) {
							dsstr = t1 + ":" + t2 + "--" + t3 + ":" + t4;
							times.push([
								...e,
								{
									t1: `${t1}:${t2}`,
									t2: `${t3}:${t4}`,
									je1,
									je2,
									je3,
								},
							]);
						}
					}
				});
				// this.fys = times;
				let dqt = this.$z.timefn.gettime(0, new Date(), `hh:MM`);
				let dqtimes = times.findIndex((e) => {
					let h = dqt.split(":")[0];
					let M = dqt.split(":")[1];
					let h1 = e[3].t1.split(":")[0];
					let M1 = e[3].t1.split(":")[1];
					let h2 = e[3].t2.split(":")[0];
					let M2 = e[3].t2.split(":")[1];
					// 转数字
					h = Number(h);
					M = Number(M);
					h1 = Number(h1);
					M1 = Number(M1);
					h2 = Number(h2);
					M2 = Number(M2);
					return (
						(h1 < h && h < h2) || (h1 == h && M1 <= M) || (h2 == h && M2 >= M)
					);
				});
				if (dqtimes == "-1") {
					return "0";
				}
				// this.dqi = dqtimes;


				return times[dqtimes][3].je3;
			},
		},
		computed: {
			kxtd() {
				try {
					let item = this.item;
					let num = Number(item.carzlsum)
						.add(item.carjlsum)
						.subtr(item.carzlsumcd)
						.subtr(item.carjlsumcd);

					return num;
				} catch {
					return "0";
				}
			},
		},
		methods: {
			handleClick() {
				global.alert("Well done.");
			},
			itemtap() {
				this.$emit("itemtap", this.item);
				// console.log("itemtap");
			},
			draw({
				el,
				BMap,
				map
			}) {
				try {
					let mpt = this.item.mpt || "";

					mpt = mpt.match(/\d+\.\d+/g);
					// let wz = this.$store.state.config.wz;

					const pixel = map.pointToOverlayPixel(new BMap.Point(mpt[0], mpt[1]));
					// console.log(mpt, pixel, this.item);
					el.style.left = pixel.x - 0 + "px";
					el.style.top = pixel.y - 46 + "px";
					// return this.$z.getDistances(wz.lat, wz.lng, mpt[1], mpt[0]);
				} catch {
					console.log(this.item);
				}
				// const {
				// 	lng,
				// 	lat
				// } = this.position
				// const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
				// el.style.left = pixel.x - 0 + 'px'
				// el.style.top = pixel.y - 46 + 'px'
			},
		},
	};
</script>

<style lang="scss">
	.sample {
		// width: 120px;
		// height: 40px;
		// line-height: 40px;
		// background: rgba(0, 0, 0, 0.5);
		// overflow: hidden;
		// box-shadow: 0 0 5px #000;
		// color: #fff;
		// text-align: center;
		// padding: 10px;
		position: absolute;
	}

	// .sample.active {
	// 	background: rgba(0, 0, 0, 0.75);
	// 	color: #fff;
	// }

	.item {
		background: #fff;
		width: 220rpx;
		height: 92rpx;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 12rpx;
		display: flex;
		align-items: center;
		padding-left: 8rpx;
		position: relative;
		box-sizing: border-box;

		.marker {
			width: 20rpx;
			height: 20rpx;
			background: #e93426;
			position: absolute;
			left: -10rpx;
			bottom: -10rpx;
			border-radius: 50%;
			z-index: -1;

			&::after {
				box-sizing: border-box;
				width: 40rpx;
				height: 40rpx;
				// background: #e93426;
				position: absolute;
				content: "";

				border: 4rpx solid rgba(233, 52, 38, 0.6);
				left: -10rpx;
				bottom: -10rpx;
				border-radius: 50%;
				z-index: -1;
			}
		}

		.kx {
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background: #fff;
			width: 76rpx;
			height: 76rpx;
			border-top-left-radius: 12rpx;
			border-top-right-radius: 24rpx;
			border-bottom-right-radius: 24rpx;
			border-bottom-left-radius: 6rpx;
			background: rgba(32, 147, 245, 0.1);

			.text {
				color: #2093f5;
				font-weight: bold;
			}
		}

		.je {
			font-weight: bold;
			color: #f43836;
			flex: 1;
			text-align: center;
		}

		&.active {
			background: linear-gradient(to right, #f43836, #fbb53c);

			.kx {
				background-color: #fff;

				.text {
					color: #f96a30;
				}
			}

			.je {
				color: #fff;
			}
		}
	}
</style>